<template>
	<view>
		<u-toast ref="uToast" />
		<u-modal v-model="recMesShow" @confirm="receiving" show-cancel-button=true content="您确定已经收到货,并且验收完成了吗?"></u-modal>
		
		<u-modal v-model="mesShow" @confirm="refund" show-cancel-button=true content="美好的事物都值得等待,确认退款吗?"></u-modal>
		<view class="wrap">
			<u-navbar backgroundColor="#fff" :border-bottom="false" :is-back="true" title="我的订单" back></u-navbar>
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item v-for="(v,k) in orderList" :key="k" class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box" v-if="v.length>0">
							<view class="order" v-for="(res, index) in v" :key="index">
								<view class="top">
									<view class="left">
										<image style="width:50rpx;height: 50rpx;border-radius: 50%;" :src="res.shopAvatar"></image>
										<image style="margin-top: 40rpx;margin-left:30rpx;position: absolute;width: 24rpx;height: 24rpx;" src="/static/zaiui/img/v.png" lazy-load mode="widthFix" v-if="res.shopType==0"/>
										<view class="store" style="font-size: 27rpx;">{{res.shopName}}</view>
										<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
									</view>
									<view class="right">{{ orderStatus.get(res.status) }}</view>
								</view>
								<view class="item" v-for="(item, t) in res.items" :key="t">
									<view class="left"><image :src="item.skuImage" mode="aspectFill"></image></view>
									<view class="content" @click="toDeatil(res.id)">
										<view class="title u-line-1">{{ item.spuTitle }}</view>
										<view class="type">{{ item.attrValue }}</view>
										<!-- <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view> -->
									</view>
									<view class="right">
										<view class="price">
											￥{{ item.skuPrice }}
											
										</view>
										<view class="number">x{{ item.skuCount }}</view>
									</view>
								</view>
								<view class="total">
									共{{ res.items.length}}件商品 合计:
									<text class="total-price">
										￥{{ res.finalPrice}}
									</text>
								</view>
								<view class="bottom" v-if="res.status==0">
									<view class="logistics btn" @click="delOrder(res.id)">删除订单</view>
								</view>
								<view class="bottom" v-else-if="res.status==1">
									<view class="logistics btn">关闭订单</view>
									<view class="evaluate btn" @click="showCardBox(index)">付款</view>
								</view>
								<view class="bottom" v-else-if="res.status==2">
									<view class="logistics btn" @click="refundSure(index)">退款</view>
									<view class="exchange btn">提醒发货</view>
								</view>
								<view class="bottom" v-else-if="res.status==3">
									<view class="logistics btn">延长收货</view>
									<view class="logistics btn">查看物流</view>
									<view class="exchange btn"  @click="receivingSure(index)">确认收货</view>
								</view>
								<view class="bottom" v-else-if="res.status==4">
									<view class="exchange btn">评价</view>
								</view>
								<view class="bottom" v-else-if="res.status==11&&res.status==12">
									<view class="logistics btn">查看详情</view>
								</view>
							</view>
							
						</view>
						<view v-else class="page-box">
							<view>
								<view class="centre">
									<image style="display: inline-block;" src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode=""></image>
									<view class="explain">
										您还没有相关的订单
										<view class="tips">可以去看看有那些想买的</view>
									</view>
									<view class="btn">随便逛逛</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
		
			</swiper>
		</view>
		<radio-group @change="changeRedio">
		<view class="cu-modal" :class="cardBox ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">
						选择支付方式
					</view>
				</view>
				
				<u-line></u-line>
				<view class="padding-xl bg-white" style="text-align: left;">
					<block v-for="(item,index) in bankcardList" :key="index">
						<view @click="changeCard(index)">
							<view style="display: flex;">
								<view style="margin-top: 5rpx;" class="bankIcon" :class="['icon-'+item.bankType]"></view>
								<text style="margin-left:6rpx;font-size: 32rpx;">{{bankTypeMap.get(item.bankType)}}{{item.bankCard===undefined?'':'('+item.bankCard+')'}}</text>
								<view style="margin-left: auto;margin-top: 0rpx;">
									<radio :value="index"  style="transform:scale(0.7)" :checked="index===radio" ></radio>
								</view>
							</view>
							
						</view>
						<u-line style="margin: 1rpx;"></u-line>
					</block>
					<view style="display: flex;" @click="toAddCard">
						<view>
							<u-icon style="" name="plus" ></u-icon>
							<text style="font-size: 32rpx;margin-left:10rpx;">添加银行卡</text>	
						</view>
					</view>
				</view>
				<u-line></u-line>
				
				<view class="cu-bar bg-white justify-end">
					
				</view>
			</view>
		</view>
		</radio-group>
		<tui-keyboard :show="bottomModal" @close="closeKeyboard" @click="handleClick">
			<view style="height: 300rpx;">
				<view style="font-size:40rpx;text-align:center;margin-top:40rpx;">支付密码</view>
				<view style="font-size:40rpx;text-align:center;margin-top:40rpx;">￥{{orderPrice}}</view>
				
				<tui-keyboard-input :inputvalue="pwdArr"></tui-keyboard-input>
			</view>
		</tui-keyboard>
	</view>
</template>

<script>
	import {_orderStatus}  from '../data/orderStatus.js'
	import {_bankTypeMap,_cardTypeMap} from '@/pages/data/bank.js'
export default {
	data() {
		return {
			content:'',
			mesShow:false,
			orderPrice:0,
			orderIndex:0,
			orderId:0,
			selectedPayWay:{
				bankType:'ZFB'
			},
			bottomModal:false,
			bankcardList:[],
			cardBox:false,
			bankTypeMap:new Map([]),
			cardTypeMap:new Map([]),
			
			radio:0,
			flag:0,
			pwdArr:["", "", "", "", "", ""],
			payPassword:["", "", "", "", "", ""],
			orderList: [[],[],[],[],[]],
			orderStatus:new Map([]),
			list: [
				{
					name: '全部'
				},
				{
					name: '待付款'
				},
				{
					name: '待发货'
				},
				{
					name: '待收货'
				},
				{
					name: '待评价'
				}
			],
			current:0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0,
			loadStatus: ['loadmore','loadmore','loadmore','loadmore'],
			query:{
				current:1,
				size:5
			},
			pageMax:1,
			recMesShow:false,
			
		};
	},
	onLoad(v) {
		
		this.bankTypeMap=_bankTypeMap;
		this.cardTypeMap=_cardTypeMap;
		this.orderStatus=_orderStatus;
		
		this.change(v.type)
	},
	onShow() {
		this.$set(this.orderList,this.current,[])
		this.query.current=0
	
		
		this.onLoadData(this.current)
		this.$u.api.getBankCardList().then(res=>{
			this.bankcardList=res
			this.bankcardList.push({bankType:'ZFB'},{bankType:'WX'},{bankType:'OCM'})
			this.selectedPayWay=this.bankcardList[this.bankcardList.length-1]
		})
	},
	
	computed: {
		// orderStatus(){
		// 	if(this.current==0)
		
		// }
	
	},
	methods: {
		receivingSure(){
			this.orderIndex=index
			this.recMesShow=true
		},
		receiving(){
			this.$u.api.receivingOrder(
				this.orderIndex
			).then(res=>{
				this.$refs.uToast.show({
					title: '收货成功',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
					type: 'success', 
						// 如果不需要图标，请设置为false
					icon: false,
					duration:500,
					back:false,
				});
				this.loadData()
			})
		},
		delOrder(id){
			this.$u.api.deleteOrder(id).then(res=>{
				this.$refs.uToast.show({
					title: '删除成功',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
					type: 'success', 
						// 如果不需要图标，请设置为false
					icon: false,
					duration:500
				});
				this.$set(this.orderList,this.current,[])
				this.query.current=0
				this.onLoadData(this.current)
			})
		},
		toDeatil(id){
			uni.navigateTo({
				url: '/pages/order/details?id='+id
			});
		},
		onLoadData(status){
			if(this.query.current<this.pageMax||this.pageMax==0){
				this.query.current++
				this.$u.api.orderList(Object.assign({
					status:status==0?-1:status},this.query)).then(res=>{
					let t=this.orderList[status].concat(res.records)
					this.$set(this.orderList,status,t)
					this.pageMax=res.pages
				})
			}
			
		},
		refundSure(index){
			this.orderIndex=index
			this.mesShow=true
		},
		refund(){
			this.$u.api.refundOrder({
				orderId:this.orderList[this.current][this.orderIndex].id,
				amount:this.orderList[this.current][this.orderIndex].finalPrice
			}).then(res=>{
				this.$refs.uToast.show({
					title: '退款成功',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
					type: 'success', 
						// 如果不需要图标，请设置为false
					icon: false,
					duration:500,
					back:false,
				});
				this.$set(this.orderList,this.current,[])
				this.query.current=0
				this.onLoadData(this.current)
			})
		},
		changeRedio(i){
			this.radio=Number(i.detail.value)
			this.selectedPayWay=this.bankcardList[this.radio]
			this.cardBox=false
		},
		toAddCard(){
			uni.navigateTo({
				url: "/pages/bankCard/addBankCard"
			});
		},
		showCardBox(i){
			this.orderPrice=this.orderList[this.current][i].finalPrice
			this.orderId=this.orderList[this.current][i].id
			this.cardBox=true
		},
		closeCardBox(){
			this.cardBox=false
		},
		changeCard(i){
			this.radio=Number(i)
			this.selectedPayWay=this.bankcardList[this.radio]
			this.cardBox=false
			this.bottomModal=true
		},
		closeKeyboard(){
			this.pwdArr=["", "", "", "", "", ""]
			this.payPassword=["", "", "", "", "", ""]
			this.flag=0
			this.bottomModal=false
		},
		handleClick(v){
			if(v.index<9&&this.flag<6){
				this.pwdArr[this.flag]='●'
				this.payPassword[this.flag]=v.index+1
				this.flag+=1
				if(this.flag==6){
					this.paySubmit();
				}
				
			}else if(v.index==10&&this.flag<6){
				this.pwdArr[this.flag]='●'
				this.payPassword[this.flag]=0
				this.flag+=1
				if(this.flag==6){
					this.paySubmit();
				}
			}	
			if(v.index==9){
				this.closeKeyboard()
				return
			}
			if(v.index==11&&this.flag>0){
				this.payPassword[this.flag-1]=""
				this.pwdArr[this.flag-1]=""
				this.flag-=1
				return
			}
			
		},
		paySubmit(){
			this.$u.api.payOrder({
				payPassword:this.payPassword.join(''),
				cardId:this.selectedPayWay.cardId,
				bankCard:this.selectedPayWay.bankCard,
				bankType:this.selectedPayWay.bankType,
				cardType:this.selectedPayWay.cardType,
				orderIds:[this.orderId]
			}).then(res=>{
				this.bottomModal=false
				this.$refs.uToast.show({
					title: '支付成功',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
					type: 'success', 
						// 如果不需要图标，请设置为false
					icon: false,
					duration:500,
					back:false,
				});
				
			})
		},
		reachBottom() {
			this.onLoadData(this.current)
		},
		
		// 总价
		totalPrice(item) {
			let price = 0;
			item.map(val => {
				price += parseFloat(val.price);
			});
			return price.toFixed(2);
		},
		// 总件数
		totalNum(item) {
			let num = 0;
			item.map(val => {
				num += val.number;
			});
			return num;
		},
		// tab栏切换
		change(index) {
			this.query.current=0;
			this.swiperCurrent = index;
			this.$set(this.orderList,index,[])
			this.onLoadData(index);
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		}
	}
};
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.right {
			color: $u-type-warning-dark;
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		.left {
			margin-right: 20rpx;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}
			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}
		.right {
			margin-left: auto;
			
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
	.bottom {
		display: flex;
		margin-top: 40rpx;
		justify-content: flex-end;
		
		align-items: center;
		.btn {
			line-height: 52rpx;
			width: 160rpx;
			margin-left:25rpx;
			border-radius: 26rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: $u-type-info-dark;
		}
		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}
}
.centre {
	text-align: center;
	margin: 200rpx auto;
	font-size: 32rpx;
	image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}
	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.btn {
		margin: 80rpx auto;
		width: 200rpx;
		border-radius: 32rpx;
		line-height: 64rpx;
		color: #ffffff;
		font-size: 26rpx;
		background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 16px - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
</style>
